<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
  xmlns:p="http://primefaces.org/ui" xmlns:c="http://java.sun.com/jsp/jstl/core">

<h:head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <!--ADD META TAGS AS NECESSARY. ADD PAGE NAME TO FIRST ITEM IN TITLE TAG. DONT FORGET SITE NAME-->
  <title>Timesheet Manager - Test</title>
  <link rel="icon" href="../images/favicon.ico" type="image/x-icon" />
  <link rel="shortcut icon" href="../images/favicon.ico" type="image/x-icon" />
  <h:outputStylesheet library="css" name="default.css" />
</h:head>

<h:body>
  <div id="wrapper">
    <div id="content">
      <h1>Timesheet</h1>

      <h:form id="form">
        <p:growl id="messages" showDetail="true"/>
        
        <p:dataTable style="margin: 0 auto; width: 100%" var="day" value="#{timesheetBean.timesheet.timesheetDays}"
          editable="true">

          <f:facet name="header">
            <p:row>
              <p:column colspan="11">
                <h:outputText value="#{timesheetBean.timesheet.periodCommenceDate}">
                  <f:convertDateTime pattern="dd/MM/yyyy" />
                </h:outputText>
                -
                <h:outputText value="#{timesheetBean.timesheet.periodEndDate}">
                  <f:convertDateTime pattern="dd/MM/yyyy" />
                </h:outputText>
              </p:column>
            </p:row>
            <p:row>
              <p:column colspan="1"></p:column>
              <p:column colspan="5">PLANNED</p:column>
              <p:column colspan="5">ACTUAL</p:column>
            </p:row>
          </f:facet>

          <p:ajax event="rowEdit" listener="#{timesheetBean.onEdit}" update=":form:messages" />
          <p:ajax event="rowEditCancel" listener="#{timesheetBean.onCancel}" update=":form:messages" />
          
          <p:column headerText="DATE">
            <h:outputText value="#{day.timesheetDay}" style="text-transform: uppercase;">
              <f:convertDateTime pattern="dd/MM/yyyy [EEE]" />
            </h:outputText>
          </p:column>

          <p:column headerText="START">
            <p:cellEditor>
              <f:facet name="output">
                <h:outputText value="#{day.plannedStart}">
                  <f:convertDateTime pattern="HH:mm" />
                </h:outputText>
              </f:facet>
              <f:facet name="input">
                <p:inputText value="#{day.plannedStart}">
                  <f:convertDateTime pattern="HH:mm" />
                </p:inputText>
              </f:facet>
            </p:cellEditor>
          </p:column>

          <p:column headerText="FINISH">
            <h:outputText value="#{day.plannedFinish}">
              <f:convertDateTime pattern="dd/MM/yyyy" />
            </h:outputText>
          </p:column>
          <p:column headerText="LUNCH">
            <h:outputText value="#{day.plannedLunch}">
              <f:convertDateTime pattern="dd/MM/yyyy" />
            </h:outputText>
          </p:column>
          <p:column headerText="LEAVE">
            <h:outputText value="#{day.plannedLeave}">
              <f:convertDateTime pattern="dd/MM/yyyy" />
            </h:outputText>
          </p:column>
          <p:column headerText="LEAVE TYPE">
            <h:outputText value="#{day.plannedLeaveType}">
              <f:convertDateTime pattern="dd/MM/yyyy" />
            </h:outputText>
          </p:column>

          <p:column headerText="START">
            <h:outputText value="#{day.actualStart}">
              <f:convertDateTime pattern="dd/MM/yyyy" />
            </h:outputText>
          </p:column>
          <p:column headerText="FINISH">
            <h:outputText value="#{day.actualFinish}">
              <f:convertDateTime pattern="dd/MM/yyyy" />
            </h:outputText>
          </p:column>
          <p:column headerText="LUNCH">
            <h:outputText value="#{day.actualLunch}">
              <f:convertDateTime pattern="dd/MM/yyyy" />
            </h:outputText>
          </p:column>
          <p:column headerText="LEAVE">
            <h:outputText value="#{day.actualLeave}">
              <f:convertDateTime pattern="dd/MM/yyyy" />
            </h:outputText>
          </p:column>
          <p:column headerText="LEAVE TYPE">
            <h:outputText value="#{day.actualLeaveType}">
              <f:convertDateTime pattern="dd/MM/yyyy" />
            </h:outputText>
          </p:column>
          <p:column>
            <p:rowEditor />
          </p:column>

        </p:dataTable>
      </h:form>
    </div>
  </div>
</h:body>
</html>
